<template>
  <div>
    <div class="role-list">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公司名称">
          <el-input v-model="formInline.userGroupName" placeholder="公司名称,支持模糊匹配" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.userGroupStatus" placeholder="请选择">
            <el-option label="已启用" value="0" />
            <el-option label="已禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column label="公司名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.userGroupName }}
          </template>
        </el-table-column>
        <el-table-column label="顶部名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.nameTop }}
          </template>
        </el-table-column>
        <el-table-column label="版权" align="center">
          <template slot-scope="scope">
            {{ scope.row.nameBottom }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.userGroupStatus === '0'" type="success" disabled>已启用</el-button>
            <el-button v-else type="danger" plain disabled>已禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" style="padding: 5px 15px;margin-left: 0" @click="handleAuthor(scope.$index, scope.row)">授权</el-button>
            <el-button size="mini" type="primary" style="padding: 5px 15px;margin-left: 0" @click="handleDept(scope.$index, scope.row)">部门</el-button>
            <el-button size="mini" type="warning" style="padding: 5px 15px;margin-left: 0" @click="handleRole(scope.$index, scope.row)">角色</el-button>
            <el-button size="mini" type="danger" plain style="padding: 5px 15px;margin-left: 0" @click="handleStatus(scope.$index, scope.row)">状态</el-button>
            <el-button size="mini" type="warning" plain style="padding: 5px 15px;margin-left: 0" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" style="padding: 5px 15px;margin-left: 0" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="tableData.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!--添加-->
      <vip-add v-show="hideAddCompBoolean" :hide-add-comp-boolean="hideAddCompBoolean" @hideAddChildComp="hideAddChildComp" />
      <!--编辑-->
      <vip-edit v-show="hideEditCompBoolean" :vip-uid-obj-edit="vipUidObjEdit" :hide-edit-comp-boolean="hideEditCompBoolean" @hideEditChildComp="hideEditChildComp" />
      <!--授权-->
      <vip-author v-show="hideAuthorCompBoolean" :vip-auth-comp="vipAuthComp" />
      <!--角色-->
      <vip-role v-show="hideRoleCompBoolean" :vip-uid-obj-role="vipUidObjRole" :hide-role-comp-boolean="hideRoleCompBoolean" @hideRoleChildComp="hideRoleChildComp" />
      <!--状态-->
      <vip-status v-show="hideStatusCompBoolean" />
      <!--部门-->
      <vip-dept v-show="hideDeptCompBoolean" />
      <!--详情-->
      <vip-detail v-show="hideDetailCompBoolean" :vip-uid-obj-detail="vipUidObjDetail" :hide-detail-comp-boolean="hideDetailCompBoolean" @hideDetailChildComp="hideDetailChildComp" />
    </div>
  </div>
</template>

<script>
import Vip from '@/api/axios/api/author/vip'
import VipAdd from './component/VipAdd'
import VipAuthor from './component/VipAuthor'
import VipDept from './component/VipDept'
import VipEdit from './component/VipEdit'
import VipRole from './component/VipRole'
import VipStatus from './component/VipStatus'
import VipDetail from './component/VipDetail'
export default {
  name: 'AuthVip',
  components: {
    VipAdd,
    VipAuthor,
    VipDept,
    VipEdit,
    VipRole,
    VipDetail,
    VipStatus
  },
  data() {
    return {
      hideAddCompBoolean: false,
      hideEditCompBoolean: false,
      hideAuthorCompBoolean: false,
      hideRoleCompBoolean: false,
      hideStatusCompBoolean: false,
      hideDeptCompBoolean: false,
      hideDetailCompBoolean: false,
      vipUidObjEdit: {},
      vipUidObjDetail: {},
      vipUidObjRole: {},
      vipAuthComp: {
        hideAuthorCompBoolean: Boolean,
        authRow: {},
        authMenuTreeData: []
      },
      formInline: {
        userGroupName: '',
        userGroupStatus: '',
        region: '',
        pageSize: 10,
        pageNum: 1
      },
      tableData: {}
    }
  },
  created() {
    this.vipData()
  },
  methods: {
    handleEdit(index, row) {
      this.hideEditCompBoolean = true
      this.vipUidObjEdit = row
    },
    hideEditChildComp(data) {
      this.hideEditCompBoolean = data
      setTimeout(() => {
        this.vipData()
      }, 1000)
    },
    handleDetail(index, row) {
      this.hideDetailCompBoolean = true
      this.vipUidObjDetail = row
    },
    hideDetailChildComp(data) {
      this.hideDetailCompBoolean = data
    },
    handleRole(index, row) {
      this.hideRoleCompBoolean = true
      this.vipUidObjRole = row
    },
    hideRoleChildComp(data) {
      this.hideRoleCompBoolean = data
    },
    handleAdd(index, row) {
      this.hideAddCompBoolean = true
    },
    hideAddChildComp(data) {
      this.hideAddCompBoolean = data
      setTimeout(() => {
        this.vipData()
      }, 1000)
    },
    handleAuthor(index, row) {
      Vip.vipRoleHaveAclTree(row).then(res => {
        this.vipAuthComp.hideAuthorCompBoolean = true
        this.vipAuthComp.authRow = row
        this.vipAuthComp.authMenuTreeData = res.data
        this.hideAuthorCompBoolean = true
      })
    },
    handleDept() {
      this.hideAddCompBoolean = false
    },
    handleCurrentChange(pageNum) {
      this.formInline.pageNum = pageNum
      this.vipData()
    },
    handleSizeChange(pageSize) {
      this.formInline.pageSize = pageSize
      this.vipData()
    },
    onSubmit() {
      this.vipData()
    },
    vipData() {
      Vip.vipPage(this.formInline).then(value => {
        this.tableData = value.data
      })
    },
    handleStatus(index, row) {
      let msg = '启用'
      if (row.userGroupStatus === '0') {
        msg = '禁用'
      }
      this.$confirm('您确定要 ' + msg + ' ' + row.userGroupName + ' 吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Vip.vipStatus(row).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: res.data
            })
            setTimeout(() => {
              this.vipData()
            }, 1000)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消对 ' + row.userGroupName + ' 的状态变更'
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .role-list
    margin-left 250px
    padding 18px
    overflow hidden
</style>
